<template>
  <div class="showBigImageDialog__container">
    <el-dialog v-model="dialogVisible" title="材料详情" width="80%" draggable>
      <div class="showBigImageDialog__body__container"></div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">
            关闭
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup name="ShowOrderDetailDialog">
import { getMaterialList } from "@/api/order";

const dialogVisible = ref(false);
const orderId = ref<number>(0);

// 获取材料详情接口
const getMaterialListService = async () => {
  let params = {
    page: 1,
    limit: 0,
    filter: JSON.stringify({
      orderId: orderId.value,
    }),
  };
  let res = await getMaterialList(params);
  console.log("材料详情返回结果  ", res);
};

const handleOpen = (orderIdParam: number = 0) => {
  orderIdParam && (orderId.value = orderIdParam);
  console.log("orderId  ", orderId.value, typeof orderId.value);
  getMaterialListService();
  dialogVisible.value = true;
};
defineExpose({
  handleOpen,
});
</script>

<style lang="scss" scoped>
.showBigImageDialog__container {
  .showBigImageDialog__body__container {
    box-sizing: border-box;
    padding-right: 15px;
    max-height: 70vh;
    overflow-y: auto;
  }
}
</style>
